<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名视图</title>
</head>
<body>
<div id="app">
    <ul>
        <li>
            <router-link to="/">First Page</router-link>
        </li>
        <li>
            <router-link to="/other">Other Page</router-link>
        </li>
    </ul>

    <!--  如果不进行任何属性指定的话，默认显示的是 default 对应的组件  -->
    <router-view></router-view>
    <!--  通过 name 属性指定显示组件  -->
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>


</div>

<script type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";
    import {createRouter, createWebHashHistory} from "../../../../js/vue-router.esm-browser.js";

    let First = {template: "<h1>First Component</h1>"}
    let Second = {template: "<h1>Second Component</h1>"}
    let Third = {template: "<h1>Third Component</h1>"}

    const routes = [
        {
            path: "/",
            // 一个 URL 对应的是一个 组件，因此选项使用的是单数形式。
            // component: Home,
            // 一个 URL 对应多个组件，因此选项使用复数形式
            components: {
                // 采用 key: value 的形式进行指定
                default: First,
                a: Second,
                b: Third,
            }
        },
        {
            path: "/other",
            components: {
                default: Third,
                a: Second,
                b: First,
            }
        }
    ]

    let router = createRouter(
        {
            history: createWebHashHistory(),
            routes,
        }
    )

    let app = createApp(
        {
            setup() {
                return {}
            }
        }
    )

    app.use(router)

    app.mount("#app")
</script>
</body>
</html>